<template>
  <div id="cards">
    <div class="title">设备状态</div>
    <div class="cards-border">
      <dv-decoration-10 style="height:2px;width:100%" />
      <div class="cards-list">
        <div class="card-item" v-for="card in sData[showIdx]" :key="card.id" @mouseover="stop()" @mouseout="play()">
          <div class="card-header">{{card.stattionName}}</div>
          <div class="card-content">
            <div class="card-img">
              <img class="stattionImg" src="@/assets/img/station.jpg" />
              <!-- <img class="stattionImg" :src="bindImg(card.stattionName,'imgMachine')" /> -->
            </div>
            <div class="cc-item">
              <div class="cc-status">设备状态：
                <div class="cc-bg ci-item" :style="{background:colors[card.workStationStatus]}">
                  <div class="ciip"><img :src="bindImg(card.workStationStatus,'iconStatus')" />
                    <span>{{statusTxt[card.workStationStatus]}}</span>
                  </div>
                  <!-- <img :src="imgStatus[card.workStationStatus]">{{statusTxt[card.workStationStatus]}} -->
                </div>
              </div>
              <div class="card-text">总产量：<span>{{card.totalOutput}}</span></div>
              <div class="card-text">OK数量：<span>{{card.okOutput}}</span></div>
              <div class="card-text">NG数量：<span>{{card.ngOutput}}</span></div>
              <div class="card-text">良率：<span>{{card.yield + '%'}}</span></div>
            </div>
          </div>
          <!-- <dv-decoration-2 class="decoration-2" :reverse="true" style="width:5px;" v-if="line(idx)" /> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { machineInfo } from "@/network/home.js";
// import a from "@/assets/img/icon1.png"
// import b from "@/assets/img/icon2.png"
// import c from "@/assets/img/icon3.png"
// import d from "@/assets/img/icon4.png"
const TIMES = 2; // 切换时间为：TIMES*显示的card个数
export default {
  name: "Cards",
  data() {
    return {
      data: [],
      cards: [],
      sData: [],
      lineNum: 4,
      colors: ["#00A4E7", "#12A368", "#FF5959", "#ff0000", "#FAE220", "#E69304"],
      // imgStatus:[a,b,c,d],
      statusTxt: ["空闲", "运行", "停止", "急停", "故障", "需要维护"],
      showIdx: 0,
      nowIdx: 0,
      timer: null,
    };
  },
  mounted() {
    this.getMachineInfo();
  },
  methods: {
    bindImg(imgName, icon) {
      if (icon === "imgMachine") {
        return require("@/assets/img/" + imgName + ".jpg");
      }
      if (icon === "iconStatus") {
        return require("@/assets/img/icon" + imgName + ".png");
      }
    },
    getMachineInfo() {
      machineInfo().then((res) => {
        this.data = res.data.data;
        this.sData = this.splitData(this.data, this.lineNum);
        if (this.data.length > this.lineNum) this.orderTime();
      });
    },
    orderTime() {
      this.timer = setInterval(() => {
        if (this.nowIdx == this.sData[this.showIdx].length - 1) {
          this.nowIdx = 0;
          this.showIdx == this.sData.length - 1
            ? (this.showIdx = 0)
            : (this.showIdx += 1);
        } else {
          this.nowIdx += 1;
        }
      }, TIMES * 1000);
    },
    //对象数组拆分
    splitData(arr, N) {
      let result = [];
      if (arr.length > N) {
        for (let i = 0; i < arr.length; i += N) {
          let a = arr.length - (i + N);
          if (a < 0) {
            let cha = -a;
            let newA = arr.slice(i, arr.length);
            let newB = arr.slice(0, cha);
            let newArr = [...newA, ...newB];
            result.push(newArr);
            i = cha - N;
          } else {
            result.push(arr.slice(i, i + N));
          }
        }
      } else {
        result.push(arr);
      }
      return result;
    },

    stop() {
      if (this.data.length > this.lineNum) {
        clearInterval(this.timer);
      }
    },
    play() {
      if (this.data.length > this.lineNum) {
        this.orderTime();
      }
    },
  },
};
</script>
<style lang="less">
#cards {
  // position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    height: 15%;
    padding: 14px 0 0;
    color: #3bc5ec;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    box-sizing: border-box;
  }
  .cards-border {
    width: 100%;
    height: 85%;
    margin: 0 auto;
  }
  .cards-list {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
  }

  .decoration-1 {
    display: absolute;
    left: 0%;
  }

  .card-header {
    height: 50px;
    display: flex;
    justify-content: center;
    // align-items: center;
    font-size: 18px;
    font-weight: 700;
  }
  .card-item {
    position: relative;
    width: 24%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    background-color: rgba(6, 30, 93, 0.5);
    // border-top: 2px solid rgba(1,153,209,.5);
  }

  .card-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;
    .card-img {
      width: 48%;
      height: 23vh;
      text-align: center;
      .stattionImg {
        width: 80%;
        height: 80%;
      }
    }
  }
  .cc-item {
    width: 48%;
    height: 23vh;
    text-align: left;

    .card-text {
      margin: 0;
      line-height: 36px;
      display: flex;
      justify-content: space-between;
      width: 88%;
      span {
        width: 47%;
        text-align: left;
      }
      .ciip {
        margin: 0;
      }
    }
    .cc-status {
      display: flex;
      img {
        width: 22px;
        vertical-align: middle;
      }
      .cc-bg {
        padding: 1% 4%;
        margin: 0 0 0 10px;
        font-size: 14px;
        .ciip {
          margin: 0;
          span {
            position: relative;
            top: 2px;
          }
        }
      }
    }
  }

  .decoration-2 {
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>